<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
    <title>关于我</title>
    <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <link href="../static/css/myCss.css" rel="stylesheet">
</head>
<body>
<nav th:replace="_fragments :: menu(5)" class="ui inverted attached segment my-padding-tb-mini my-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary menu stackable">
            <h2 class="ui header teal item">Blog</h2>
            <a href="#"  class="my-item item my-mobile-hide">首页</a>
            <a href="#" class="my-item item my-mobile-hide">标签</a>
            <a href="#" class="my-item item my-mobile-hide">分类</a>
            <a href="#" class="my-item item my-mobile-hide">归档</a>
            <a href="#" class="active my-item item my-mobile-hide">关于我</a>

            <div class="right item">
                <div>
                    <div class="ui icon inverted transparent input">
                        <input type="text" placeholder="搜索">
                        <i class="search link icon"></i>

                    </div>
                </div>

                <button class="ui button" style="margin-left: 1em !important;">注册/登陆</button>
            </div>

        </div>
    </div>
    <a href="#" class="menu tooggle ui icon black button my-top-right my-mobile-show"><i class="sidebar icon"></i></a>
</nav>

<!--中间内容-->
<div class="my-padding-tb-large my-container-small animated fadeIn">
    <div class="ui container">
        <div class="ui grid stackable">
            <!--        左边-->
            <div class="ui eleven wide column animated fadeInUp">
                <img src="../static/images/pika.jpg" th:src="@{/images/pika.jpg}" alt="" class="ui image rounded"
                     style="width: 800px">
            </div>

            <!--        右边-->
            <div class="ui five wide column animated fadeInUp">
                <div class="ui segment top attached">
                    <div class="ui header">关于我</div>
                </div>

                <!--                个人简介-->
                <div class="ui attached segment"><p>张泽</p>
                    <p>只有经过地狱般的磨难，才能有创造天堂的力量</p></div>

                <!--                个人标签-->
                <div class="ui attached segment">
                    <h3>个人标签</h3>
                    <div class="ui orange basic label  my-margin-tb-tiny">云程序员</div>
                    <div class="ui orange basic label  my-margin-tb-tiny">河南太极职业学院</div>
                    <div class="ui orange basic label  my-margin-tb-tiny">西兰花</div>
                    <div class="ui orange basic label  my-margin-tb-tiny">马狄煊爸爸</div>
                    <div class="ui orange basic label  my-margin-tb-tiny">言少爷爷</div>
                </div>

                <!--                技术标签-->
                <div class="ui attached segment">
                    <h3>技术标签</h3>
                    <div class="ui teal basic label my-margin-tb-tiny">写BUG</div>
                    <div class="ui teal basic label my-margin-tb-tiny">改BUG</div>
                </div>

                <!--                联系我-->
                <div class="ui bottom attached segment">
                    <a href="https://github.com/ZhangZef" class="ui circular icon button"><i class="github icon"></i></a>
                    <a href="#" class="ui circular icon button wechat"><i class="wechat icon"></i></a>
                    <a href="#" class="ui circular icon button qq" data-content="qq number"><i class="qq icon"></i></a>
                    <a href="https://zhangzef.com/" class="ui circular icon button"><i class="rss icon"></i></a>
                </div>

                <div class="ui flowing popup transition hidden wechat-QR">
                    <img src="../static/images/wewewechat.png" th:src="@{/images/wewewechat.png}" alt="" class="ui image rounded QR">
                </div>
                <div class="ui flowing popup transition hidden qq-QR">
                    <img src="../static/images/qqqq.jpg" th:src="@{/images/qqqq.jpg}" alt="" class="ui image rounded QR">
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.js"></script>
<script>
    $('.menu.tooggle').click(function () {
        $('.my-item').toggleClass('my-mobile-hide');
    });

    $('.qq').popup({
        popup: $('.qq-QR.popup'),
        position: 'bottom center'
    });

    $('.wechat').popup({
        popup: $('.wechat-QR.popup'),
        position: 'bottom center'
    });

</script>
</body>
</html>